/// <reference path="../../../../../node_modules/@types/underscore/index.d.ts" />
import {Component, OnInit} from '@angular/core';
import {Menu} from './menu-item/menu-item.component';
import {pxToRem, widthSpread} from '../../../../ng-tools';
import {MenuService} from '../../../services/api/menu.service';
import {UserService} from '../../../services/api/user.service';
import {ThemeService} from '../../../services/theme.service';


export const widthSpreadTrigger = widthSpread(pxToRem(50), pxToRem(250), '200ms ease-out');


@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss'],
  animations: [
    widthSpreadTrigger
  ]
})
export class MenuComponent implements OnInit {

  stateExpression = 'start';

  public menus: Menu[];

  constructor(
    private user: UserService,
    public theme: ThemeService,
  ) {
  }

  ngOnInit() {
    this.user.menuObserver().subscribe(menu => {
      this.menus = menu.tree;
    });
  }

  showMenu(): void {
    this.stateExpression = 'end';
  }

  hideMenu(): void {
    this.stateExpression = 'start';
  }
}


